<template>
  <div class="message-list" ref="listRef">
    <div v-if="messages.length === 0" class="empty-state">
      <el-empty description="开始与 Agent 对话吧" :image-size="120" />
    </div>
    
    <MessageItem
      v-for="message in messages"
      :key="message.id"
      :message="message"
      @restore="$emit('restore', message)"
    />

    <div v-if="loading" class="loading-indicator">
      <el-icon class="is-loading"><Loading /></el-icon>
      <span class="ml-2">AI 正在思考...</span>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue'
import { Loading } from '@element-plus/icons-vue'
import MessageItem from './MessageItem.vue'

const props = defineProps({
  messages: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const listRef = ref(null)

// 滚动到底部
const scrollToBottom = () => {
  nextTick(() => {
    if (listRef.value) {
      listRef.value.scrollTop = listRef.value.scrollHeight
    }
  })
}

// 监听消息变化，自动滚动
watch(
  () => props.messages.length,
  () => {
    scrollToBottom()
  },
  { deep: true }
)

// 监听loading状态
watch(
  () => props.loading,
  () => {
    if (props.loading) {
      scrollToBottom()
    }
  }
)

defineExpose({
  scrollToBottom
})
</script>

<style scoped>
.message-list {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  background: #f9fafb;
}

html.dark .message-list {
  background: #0a0a0a;
}

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  color: #6b7280;
  font-size: 0.875rem;
}

html.dark .loading-indicator {
  color: #a1a5b0;
}

@media (max-width: 768px) {
  .message-list {
    padding: 0.75rem;
  }
}
</style>


